<template>
  <div :class="$style.wrap">
    <ContentWrap>
      <FormContainer :column="3">
        <el-form ref="form" label-width="100px">
          <el-form-item label="参数代码" prop="paramCode">
            <el-input v-model="paramCode" placeholder="请输入参数代码" clearable></el-input>
          </el-form-item>
          <el-form-item label="参数名称" prop="paramName">
            <el-input v-model="paramName" placeholder="请输入参数名称" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <div class="button-container" style="padding-top:0;">
              <Button enter type="primary" @click="queryHandle">查询</Button>
            </div>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div class="button-container" style="padding-top:0;">
        <AddEdit :params-flag-list="paramsFlagList" @refresh="refresh"></AddEdit>
        <AddEdit title="修改" text="修改" :disabled="diseditable" :params-flag-list="paramsFlagList" :data="selectedArry" is-edit @refresh="refresh"></AddEdit>
        <!-- <Button type="primary" :disabled="selectedArry.length<2" @click="removeHandle">批量删除</Button> -->
        <Button type="danger" @click="removeHandle">删除</Button>
      </div>
      <table-box ref="table" :table-config="tableConfig" no-request :other-filters="otherFilters" :selected-arry.sync="selectedArry">
        <!-- <el-table-column slot="before" type="selection" width="50" /> -->
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import { filtersRaw } from '@/utils'
import { ccDict } from '@/api/dataDict'
import AddEdit from './components/addEdit'
import { deleteSystemParam } from '@/api/ivrParam'
export default {
  name: 'ParameterManage',
  components: {
    ContentWrap,
    AddEdit,
    FormContainer
  },
  data() {
    return {
      paramCode: '',
      paramName: '',
      tableConfig: {
        interfacePath: '/call-center/api/v1/systemParam/page',
        pageFlag: true,
        hideFuncBar: true,
        sort: 'paramCode',
        order: 'desc',
        // 表格字段动态配置
        setting: [
          {
            prop: 'paramCode',
            label: '参数代码'
          },
          {
            prop: 'paramName',
            label: '参数名称'
          },
          {
            prop: 'maintainFlag',
            label: '维护标识',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'call-center',
              dictTypeCode: 'MAINTAIN_FLAG'
            }
          },
          {
            prop: 'paramValue',
            label: '参数值'
          },
          {
            prop: 'paramDesc',
            label: '参数说明'
          }
        ]
      },
      otherFilters: [],
      selectedArry: [],
      paramsFlagList: []
    }
  },
  computed: {
    // 维护标识 1可维护 2不可删除 3不可修改 4不可维护
    dismaintainable() {
      if (this.selectedArry.length !== 1) {
        return true
      } else {
        return this.selectedArry[0].maintainFlag.toString() === '4'
      }
    },
    diseditable() {
      if (this.selectedArry.length !== 1) {
        return true
      } else {
        const v = this.selectedArry[0].maintainFlag.toString()
        return v === '3' || v === '4'
      }
    },
    disremoveable() {
      if (this.selectedArry.length !== 1) {
        return true
      } else {
        const v = this.selectedArry[0].maintainFlag.toString()
        return v === '2' || v === '4'
      }
    }

  },
  created() {
    this.getDataDict()
  },
  methods: {
    // 获取字典
    getDataDict() {
      ccDict('MAINTAIN_FLAG').then(res => {
        this.paramsFlagList = res.data
      })
    },
    queryHandle() {
      this.otherFilters = []
      if (this.paramCode !== '') {
        this.otherFilters.push(filtersRaw('paramCode', this.paramCode, '='))
      }
      if (this.paramName !== '') {
        this.otherFilters.push(filtersRaw('paramName', this.paramName, 'like'))
      }
      this.refresh()
    },
    refresh() {
      this.$nextTick(() => {
        this.$refs.table.initTableData()
      })
    },
    // 多选
    // selectionChange(v) {
    //   this.selectedArry = v
    // },
    // 删除
    removeHandle() {
      if (this.selectedArry.length !== 1) {
        this.$message.error('请选择要删除的数据！')
        return
      }
      if (this.disremoveable) {
        this.$message.error('您不能删除该条数据！')
        return
      }
      return this.$msgbox({
        title: '删除',
        message: '确认删除？',
        showCancelButton: true,
        type: 'warning'
      }).then(() => {
        return deleteSystemParam(this.selectedArry[0].id).then(res => {
          this.$message.success('删除成功！')
          this.refresh()
        })
      })
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
    // tr{
    //     background-color: white !important;
    // }
}
</style>
